<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="验证码登录" name="first">
      <el-form
        class="login-form"
        status-icon
        :rules="loginRules"
        ref="loginForm"
        :model="loginForm"
        label-width="0"
      >
        <el-form-item prop="username">
          <el-input
            size="small"
            @keyup.enter.native="handleLogin"
            v-model="loginForm.username"
            auto-complete="off"
            placeholder="请输入用户名"
          >
            <i slot="prefix" class="icon-yonghu"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            size="small"
            @keyup.enter.native="handleLogin"
            :type="passwordType"
            v-model="loginForm.password"
            auto-complete="off"
            placeholder="请输入密码"
          >
            <i
              class="el-icon-view el-input__icon"
              slot="suffix"
              @click="showPassword"
            ></i>
            <i slot="prefix" class="icon-mima"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-row :span="24">
            <el-col :span="16">
              <el-input
                size="small"
                @keyup.enter.native="handleLogin"
                :maxlength="code.len"
                v-model="loginForm.code"
                auto-complete="off"
                placeholder="请输入验证码"
              >
                <i slot="prefix" class="icon-yanzhengma"></i>
              </el-input>
            </el-col>
            <el-col :span="8">
              <div class="login-code">
            <span
              class="login-code-img"
              @click="refreshCode"
              v-if="code.type == 'text'"
            >{{ code.value }}</span
            >
                <img
                  :src="code.src"
                  class="login-code-img"
                  @click="refreshCode"
                  v-else
                />
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click.native.prevent="handleLogin"
            class="login-submit"
          >登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <!--@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@手机号登录@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-->
    <el-tab-pane label="手机号登录" name="second">
      <el-form
          :model="loginForm"
          :rules="rules"
          ref="ruleForm"
          class="login-form"
          status-icon
          label-width="0"
      >
        <el-form-item prop="phone">
          <el-input
            size="small"
            @keyup.enter.native="submitForm('ruleForm')"
            v-model="loginForm.phone"
            auto-complete="off"
            placeholder="请输入手机号"
          >
            <i slot="prefix" class="el-icon-phone"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-row :span="24">
            <el-col :span="16">
              <el-input
                size="small"
                @keyup.enter.native="submitForm('ruleForm')"
                v-model="loginForm.code"
                auto-complete="off"
                placeholder="请输入验证码"
              >
                <i slot="prefix" class="icon-yanzhengma"></i>
              </el-input>
            </el-col>
            <el-col :span="8">
              <div class="login-code">
                <el-button
                  type="primary"
                  style="width: 100px;height: 38px;background-color: red;border-color: red;"
                  @click="hqyzm"
                >获取验证码</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click.native.prevent="submitForm('ruleForm')"
            class="login-submit"
          >登录</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { randomLenNum } from "@/util/util";
import { mapGetters } from "vuex";
export default {
  name: "userlogin",
  data() {
      var checkphone = (rule, value, callback) => {
              // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
              if (value==="") {
                  callback(new Error("请输入手机号"));
              } else if (!this.isCellPhone(value)) {
                  // 引入methods中封装的检查手机格式的方法
                  callback(new Error("请输入正确的手机号!"));
              } else {
                  callback();
              }
          };
    return {
      activeName: 'second',
      loginForm: {
        username: "",
        password: "",
        code: "",
        redomStr: "",
        phone:''
      },
      checked: false,
      code: {
        src: "/code",
        value: "",
        len: 4,
        type: "image"
      },
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "密码长度最少为6位", trigger: "blur" }
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      },
      passwordType: "password",
      rules: {
          phone: [{ required: true, validator: checkphone, trigger: "blur" }],
          code: [
              { required: true, message: '请输入验证码', trigger: 'blur' },
              { min: 6, max: 6, message: '6为验证码', trigger: 'blur' }
          ],
      }
    };
  },
  created() {
    this.refreshCode();
  },
  computed: {
    ...mapGetters(["tagWel"])
  },
  methods: {
    refreshCode() {
      this.loginForm.code = "";
      this.loginForm.randomStr = randomLenNum(this.code.len, true);
      this.code.type === "text"
        ? (this.code.value = randomLenNum(this.code.len))
        : (this.code.src = `${this.codeUrl}?randomStr=${this.loginForm.randomStr}`);
    },
    showPassword() {
      this.passwordType == ""
        ? (this.passwordType = "password")
        : (this.passwordType = "");
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$store
            .dispatch("LoginByUsername", this.loginForm)
            .then(() => {
              this.$router.push({ path: this.tagWel.value });
            })
            .catch(() => {
              this.refreshCode();
            });
        }
      });
    },
    handleClick(tab, event) {
         console.log(tab, event);
    },
      submitForm(formName) {
          this.$refs[formName].validate((valid) => {
              if (valid) {
                  this.$store
                      .dispatch("LoginByUsername", this.loginForm)
                      .then(() => {
                          this.$router.push({ path: this.tagWel.value });
                      });
              } else {
                  return false;
              }
          });
      },
      hqyzm(){

      },
      isCellPhone(val) {
          if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
              return false;
          } else {
              return true;
          }
      }
  }
};
</script>

<style></style>
